<template>
  <div>
    <el-select v-model="openType" @change="openTypeChange">
      <el-option
        v-for="item in openTypeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div v-loading="loading" class="mt20">
      <template v-if="list.length > 0">
        <div class="primary-section pv-12 ph-16" v-for="item in list" :key="item.id">
          <el-row align="middle">
            <el-col :span="16">
              <div class="font-w">{{ item.userName }}</div>
            </el-col>
            <el-col :span="8" align="right">
              <div class="fc-regular">{{ item.date }}</div>
            </el-col>
          </el-row>
          <div class="mt5">{{ item.description }}</div>
        </div>
      </template>
      <el-empty v-else description="暂无记录" />
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      layout="prev, pager, next,"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="OpenDoorRecord">
const openType = ref('1')
const openTypeOptions = ref([{
  label: '大门',
  value: '1'
}, {
  label: '房间0203',
  value: '2'
}])
const list = ref([])
const loading = ref(false)
const total = ref(0)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  }
})

const { queryParams } = toRefs(data)

function openTypeChange(value) {
  console.log(value);
  getList()
}

/* 获取列表 */
function getList() {
  loading.value = true
  setTimeout(() => {
    list.value = [{
      id: 1,
      userName: '林子',
      date: '2024-04-02',
      description: '12:12:45 用APP开锁'
    }, {
      id: 2,
      userName: '张晓丽',
      date: '2024-04-02',
      description: '12:12:45 用指纹开锁'
    }]
    total.value = 2
    loading.value = false
  }, 500);
}

getList()
</script>
